<template>
  <h4>1.个人信息（遍历对象{}）</h4>
  <ul>
    <li v-for="(value, key, index) in info" :key="key">{{ value }}-{{ key }}-{{ index }}</li>
  </ul>
  <h4>2.遍历数字number</h4>
  <ul>
    <li v-for="(num, index) in 3" :key="num">{{ num }}-{{ index }}</li>
  </ul>
  <h4>3.遍历数组</h4>
  <ul>
    <li v-for="item in items" :key="item.id">
      <input type="checkbox" :checked="item.checked" @change="toggleCheckbox(item)" />
      {{ item.name }}
    </li>
  </ul>
  <h4>4.v-for和template结合使用</h4>
  <template v-for="item in items2" :key="item.id">
    <div>
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
    </div>
  </template>
</template>

<!-- <script>
export default {
  name: 'vfor',
  data() {
    return {
      info: {
        name: '张三',
        age: 18,
        height: 1.88
      },
      items2: [
        { id: 1, title: 'Item 1', description: 'Description for Item 1' },
        { id: 2, title: 'Item 2', description: 'Description for Item 2' },
        { id: 3, title: 'Item 3', description: 'Description for Item 3' }
        // ...更多项目
      ],
      items: [
        { id: 1, name: 'Item 1', checked: true },
        { id: 2, name: 'Item 2', checked: false },
        { id: 3, name: 'Item 3', checked: false }
      ]
    }
  },
  methods: {
    toggleCheckbox(item) {
      item.checked = !item.checked
    }
  }
}
</script> -->
<script setup>
defineOptions({
  name: 'vfor'
})
import { ref, reactive } from 'vue'
const info = ref({
  name: '张三',
  age: 18,
  height: 1.88
})
const items2 = reactive([
  { id: 1, title: 'Item 1', description: 'Description for Item 1' },
  { id: 2, title: 'Item 2', description: 'Description for Item 2' },
  { id: 3, title: 'Item 3', description: 'Description for Item 3' }
])
const items = reactive([
  { id: 1, name: 'Item 1', checked: true },
  { id: 2, name: 'Item 2', checked: false },
  { id: 3, name: 'Item 3', checked: false }
])
function toggleCheckbox(item) {
  item.checked = !item.checked
  console.log('item: ', item)
}
</script>

<style lang="scss" scoped></style>
